<template>
	<div class="wrap">
		<el-form
			ref="forms"
			size="small"
			:model="forms"
			:rules="rules"
			label-position="right"
			label-width="auto"
			class="custom-form"
		>
			<el-card shadow="never" :border="false">
				<div slot="header" class="info-tlt">选手信息</div>
				<el-row type="flex" align="middle">
					<el-form-item label="选手姓名：" prop="player_name">
						<el-input
							v-model="forms.player_name"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="证件类型：" prop="player_cid">
						<el-select v-model="forms.player_cid" placeholder="请选择" style="width: 100%">
							<el-option label="身份证" :value="1" />
							<el-option label="护照" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码：" prop="player_cid_no">
						<el-input
							v-model="forms.player_cid_no"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle">
					<el-form-item label="手机号：" prop="player_mobile">
						<el-input
							v-model.number="forms.player_mobile"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="性别：" prop="player_sex">
						<el-select v-model="forms.player_sex" placeholder="请选择" style="width: 100%">
							<el-option label="男" :value="1" />
							<el-option label="女" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="选手类型：" prop="player_type">
						<el-select v-model="forms.player_type" placeholder="请选择" style="width: 100%">
							<el-option label="成人" :value="1" />
							<el-option label="儿童" :value="2" />
						</el-select>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle">
					<el-form-item label="国家/地区：" prop="player_country">
						<el-select
							v-model="forms.player_country"
							placeholder="请选择"
							style="width: 100%"
							filterable
						>
							<el-option
								:label="item.cname"
								:value="item.cname"
								v-for="item in countryOptions"
								:key="item.id + '国家'"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="年龄：" prop="player_age">
						<el-input
							v-model.number="forms.player_age"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="出生日期" prop="player_born">
						<el-date-picker
							v-model="forms.player_born"
							type="date"
							style="width: 100%"
							placeholder="选择日期"
						></el-date-picker>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle">
					<el-form-item label="血型：" prop="player_blood">
						<el-select v-model="forms.player_blood" placeholder="请选择" style="width: 100%">
							<el-option label="A型" value="A型" />
							<el-option label="B型" value="B型" />
							<el-option label="O型" value="O型" />
							<el-option label="AB型" value="AB型" />
							<el-option label="RH型" value="RH型" />
						</el-select>
					</el-form-item>
					<el-form-item label="衣服尺码：" prop="player_clothes">
						<el-select v-model="forms.player_clothes" placeholder="请选择" style="width: 100%">
							<el-option label="S" value="S" />
							<el-option label="M" value="M" />
							<el-option label="L" value="L" />
							<el-option label="XL" value="XL" />
							<el-option label="2XL" value="2XL" />
							<el-option label="3XL" value="3XL" />
							<el-option label="4XL" value="4XL" />
						</el-select>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle">
					<el-form-item label="居住地省份：" prop="player_province">
						<el-select
							v-model="forms.player_province"
							placeholder="请选择"
							style="width: 100%"
							@change="
								forms.player_city = ''
								forms.player_region = ''
								getColumn($event, 'cityOptions')
							"
						>
							<el-option
								:label="item.region_name"
								:value="item.region_name"
								v-for="item in provinceOptions"
								:key="item.region_id + '省份'"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="居住地城市：" prop="player_city">
						<el-select
							v-model="forms.player_city"
							placeholder="请选择"
							style="width: 100%"
							@change="
								forms.player_region = ''
								getColumn($event, 'regionOptions')
							"
						>
							<el-option
								:label="item.region_name"
								:value="item.region_name"
								v-for="item in cityOptions"
								:key="item.region_id + '城市'"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="居住地区县：" prop="player_region">
						<el-select v-model="forms.player_region" placeholder="请选择" style="width: 100%">
							<el-option
								:label="item.region_name"
								:value="item.region_name"
								v-for="item in regionOptions"
								:key="item.region_id + '区县'"
							/>
						</el-select>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle">
					<el-form-item label="详细居住地址：" prop="player_address">
						<el-input
							v-model="forms.player_address"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="紧急联系人姓名：" prop="contact_name">
						<el-input
							v-model="forms.contact_name"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="紧急联系电话：" prop="contact_tel">
						<el-input
							v-model="forms.contact_tel"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle" v-if="forms.is_free_trans !== 0">
					<el-form-item label="是否需要城际摆渡车：" prop="is_free_trans">
						<el-select v-model="forms.is_free_trans" placeholder="请选择" style="width: 100%">
							<el-option label="需要摆渡服务" :value="1" />
							<el-option label="不需要摆渡服务" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="可摆渡城市：" prop="free_trans_city">
						<el-input
							v-model="forms.free_trans_city"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle">
					<el-form-item label="邮寄地址省份：" prop="post_province">
						<el-select
							v-model="forms.post_province"
							placeholder="请选择"
							style="width: 100%"
							@change="
								forms.post_city = ''
								forms.post_region = ''
								getColumn($event, 'cityPostOptions')
							"
						>
							<el-option
								:label="item.region_name"
								:value="item.region_name"
								v-for="item in provinceOptions"
								:key="item.region_id + '邮寄省份'"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="邮寄地址城市：" prop="post_city">
						<el-select
							v-model="forms.post_city"
							placeholder="请选择"
							style="width: 100%"
							@change="
								forms.post_region = ''
								getColumn($event, 'regionPostOptions')
							"
						>
							<el-option
								:label="item.region_name"
								:value="item.region_name"
								v-for="item in cityPostOptions"
								:key="item.region_id + '邮寄城市'"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="邮寄地址区县：" prop="post_region">
						<el-select v-model="forms.post_region" placeholder="请选择" style="width: 100%">
							<el-option
								:label="item.region_name"
								:value="item.region_name"
								v-for="item in regionPostOptions"
								:key="item.region_id + '邮寄区县'"
							/>
						</el-select>
					</el-form-item>
				</el-row>
				<el-row type="flex" align="middle">
					<el-form-item label="邮寄地址：" prop="post_address">
						<el-input
							v-model="forms.post_address"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="收件人姓名：" prop="post_name">
						<el-input
							v-model="forms.post_name"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="收件人联系方式：" prop="post_tel">
						<el-input v-model="forms.post_tel" placeholder="请输入" clearable style="width: 100%" />
					</el-form-item>
				</el-row>
			</el-card>
			<el-card shadow="never" :border="false">
				<div slot="header" class="info-tlt">中签信息</div>
				<el-row type="flex" align="middle" class="grid4">
					<el-form-item label="是否中签：" prop="is_compete" label-width="100px">
						<el-select v-model="forms.is_compete" placeholder="请选择" style="width: 100%">
							<el-option label="已中签" :value="1" />
							<el-option label="未中签" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="参赛号：" prop="race_num" label-width="120px">
						<el-input v-model="forms.race_num" placeholder="请输入" clearable style="width: 100%" />
					</el-form-item>
					<el-form-item label="领物窗口号：" prop="window_num" label-width="120px">
						<el-input
							v-model="forms.window_num"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="存取衣号：" prop="clothes_num" label-width="120px">
						<el-input
							v-model="forms.clothes_num"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
				</el-row>
			</el-card>

			<el-card shadow="never" :border="false">
				<div slot="header" class="info-tlt">赛事成绩</div>
				<el-row type="flex" align="middle" class="grid4">
					<el-form-item label="5KM(净)：" prop="result_5">
						<el-input v-model="forms.result_5" placeholder="请输入" clearable style="width: 100%" />
					</el-form-item>
					<el-form-item label="5KM(枪)：" prop="result_5_gun">
						<el-input
							v-model="forms.result_5_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="10KM(净)：" prop="result_10">
						<el-input
							v-model="forms.result_10"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="10KM(枪)：" prop="result_10_gun">
						<el-input
							v-model="forms.result_10_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="15KM(净)：" prop="result_15">
						<el-input
							v-model="forms.result_15"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="15KM(枪)：" prop="result_15_gun">
						<el-input
							v-model="forms.result_15_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="20KM(净)：" prop="result_20">
						<el-input
							v-model="forms.result_20"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="20KM(枪)：" prop="result_20_gun">
						<el-input
							v-model="forms.result_20_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="21.0975KM(净)：" prop="result_21">
						<el-input
							v-model="forms.result_21"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="21.0975KM(枪)：" prop="result_21_gun">
						<el-input
							v-model="forms.result_21_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="25KM(净)：" prop="result_25">
						<el-input
							v-model="forms.result_25"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="25KM(枪)：" prop="result_25_gun">
						<el-input
							v-model="forms.result_25_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="30KM(净)：" prop="result_30">
						<el-input
							v-model="forms.result_30"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="30KM(枪)：" prop="result_30_gun">
						<el-input
							v-model="forms.result_30_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="35KM(净)：" prop="result_35">
						<el-input
							v-model="forms.result_35"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="35KM(枪)：" prop="result_35_gun">
						<el-input
							v-model="forms.result_35_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="40KM(净)：" prop="result_40">
						<el-input
							v-model="forms.result_40"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="40KM(枪)：" prop="result_40_gun">
						<el-input
							v-model="forms.result_40_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="42.195KM(净)：" prop="result_42">
						<el-input
							v-model="forms.result_42"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="42.195KM(枪)：" prop="result_42_gun">
						<el-input
							v-model="forms.result_42_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="平均配速：" prop="avg_speed_pei">
						<el-input
							v-model="forms.avg_speed_pei"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="平均时速：" prop="avg_speed_shi">
						<el-input
							v-model="forms.avg_speed_shi"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="性别净名次：" prop="sex_rank">
						<el-input v-model="forms.sex_rank" placeholder="请输入" clearable style="width: 100%" />
					</el-form-item>
					<el-form-item label="性别枪名次：" prop="sex_rank_gun">
						<el-input
							v-model="forms.sex_rank_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="年龄段净名次：" prop="age_rank">
						<el-input v-model="forms.age_rank" placeholder="请输入" clearable style="width: 100%" />
					</el-form-item>
					<el-form-item label="年龄段枪名次：" prop="age_rank_gun">
						<el-input
							v-model="forms.age_rank_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
					<el-form-item label="全部净名次：" prop="all_rank">
						<el-input v-model="forms.all_rank" placeholder="请输入" clearable style="width: 100%" />
					</el-form-item>
					<el-form-item label="全部枪名次：" prop="all_rank_gun">
						<el-input
							v-model="forms.all_rank_gun"
							placeholder="请输入"
							clearable
							style="width: 100%"
						/>
					</el-form-item>
				</el-row>
			</el-card>
		</el-form>
		<el-row type="flex" justify="center" class="footer">
			<el-button style="width: 70px" @click="$router.back()">返回</el-button>
			<el-button
				:loading="false"
				type="primary"
				@click="onSubmit"
				style="width: 120px"
				v-prevent-click="2000"
			>
				保存修改
			</el-button>
		</el-row>
	</div>
</template>
<script>
	import { orderPlayerEdit, orderPlayerDetail, countryData } from '@/api/order.js'
	import { regionLists } from '@/api/competition-manage.js'
	export default {
		name: 'CertificationCompetitionEdit',
		data() {
			return {
				disabled: false,
				forms: {
					player_name: '',
					player_cid: '',
					player_cid_no: '',
					player_sex: '',
					player_type: '',
					player_mobile: '',
					player_country: '',
					player_age: '',
					player_born: '',
					player_blood: '',
					player_clothes: '',
					player_province: '',
					player_city: '',
					player_region: '',
					player_address: '',
					contact_name: '',
					contact_tel: '',
					is_free_trans: '',
					free_trans_city: '',
					post_province: '',
					post_city: '',
					post_region: '',
					post_address: '',
					post_name: '',
					post_tel: '',
					race_num: '',
					window_num: '',
					clothes_num: '',
					is_compete: '',

					result_5: '',
					result_5_gun: '',
					result_10: '',
					result_10_gun: '',
					result_15: '',
					result_15_gun: '',
					result_20: '',
					result_20_gun: '',
					result_21: '',
					result_21_gun: '',
					result_25: '',
					result_25_gun: '',
					result_30: '',
					result_30_gun: '',
					result_35: '',
					result_35_gun: '',
					result_40: '',
					result_40_gun: '',
					result_42: '',
					result_42_gun: '',
					avg_speed_pei: '',
					avg_speed_shi: '',
					sex_rank: '',
					sex_rank_gun: '',
					age_rank: '',
					age_rank_gun: '',
					all_rank: '',
					all_rank_gun: ''
				},
				rules: {
					player_name: [{ required: true, message: '请输入选手姓名', trigger: 'blur' }],
					player_cid: [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
					player_cid_no: [{ required: true, message: '请输入证件号码', trigger: 'blur' }],
					player_mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
					player_sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
					player_type: [{ required: true, message: '请选择选手类型', trigger: 'blur' }],
					player_country: [{ required: true, message: '请选择国家/地区', trigger: 'blur' }],
					player_age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
					player_born: [{ required: true, message: '请输入出生日期', trigger: 'blur' }],
					player_blood: [{ required: true, message: '必填项', trigger: 'blur' }],
					player_clothes: [{ required: true, message: '必填项', trigger: 'blur' }],
					player_province: [{ required: true, message: '必填项', trigger: 'blur' }],
					player_city: [{ required: true, message: '必填项', trigger: 'blur' }],
					player_region: [{ required: true, message: '必填项', trigger: 'blur' }],
					player_address: [{ required: true, message: '必填项', trigger: 'blur' }],
					contact_name: [{ required: true, message: '必填项', trigger: 'blur' }],
					contact_tel: [{ required: true, message: '必填项', trigger: 'blur' }]
				},
				countryOptions: [],
				provinceOptions: [],
				cityOptions: [],
				regionOptions: [],
				provincePostOptions: [],
				cityPostOptions: [],
				regionPostOptions: []
			}
		},
		async created() {
			const { player_id, order_id } = this.$route.query
			if (player_id && order_id) {
				await this.getDetailInfo()
			}
			this.getColumnCountry()
			await this.getColumn(0, 'provinceOptions')
			await this.getColumn(this.forms.player_province, 'cityOptions')
			this.getColumn(this.forms.player_city, 'regionOptions')

			if (this.forms.post_city) {
				await this.getColumn(this.forms.post_province, 'cityPostOptions')
			}
			if (this.forms.post_region) {
				this.getColumn(this.forms.post_city, 'regionPostOptions')
			}
		},
		methods: {
			// 获取国家列表
			async getColumnCountry() {
				try {
					const res = await countryData({})
					this.countryOptions = res.data
				} catch (err) {
					console.log(err)
				}
			},
			async getColumn(parent, options) {
				try {
					if (options == 'cityOptions' && this.provinceOptions.length) {
						parent = this.provinceOptions.find(
							item => item.region_name === this.forms.player_province
						).region_id
					}
					if (options == 'regionOptions' && this.cityOptions.length) {
						parent = this.cityOptions.find(
							item => item.region_name === this.forms.player_city
						).region_id
					}
					if (options == 'cityPostOptions' && this.provinceOptions.length) {
						parent = this.provinceOptions.find(
							item => item.region_name === this.forms.post_province
						).region_id
					}
					if (options == 'regionPostOptions' && this.cityPostOptions.length) {
						parent = this.cityPostOptions.find(
							item => item.region_name === this.forms.post_city
						).region_id
					}

					const res = await regionLists({ region_parent: parent || 0 })
					this[options] = res.data
				} catch (err) {
					console.log(err)
				}
			},
			async getDetailInfo() {
				const loading = this.$setLoading()
				try {
					const { data } = await orderPlayerDetail({
						order_id: this.$route.query.order_id,
						player_id: this.$route.query.player_id
					})
					this.forms = Object.assign(this.forms, data || {})

					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			async onSubmit() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						const loading = this.$setLoading({ text: '数据提交中~' })
						try {
							orderPlayerEdit({
								order_id: this.$route.query.order_id,
								player_id: this.$route.query.player_id,
								...this.forms
							}).then(res => {
								this.$message.success(`提交成功！`)
								this.$router.back()
							})
							loading.close()
						} catch (e) {
							console.log(e)
							loading.close()
						}
					} else {
						this.$message.warning('请完善信息后提交！')
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		position: relative;
		.info-tlt {
			line-height: 20px;

			&:before {
				content: '';
				float: left;
				width: 4px;
				height: 18px;
				background-color: #37a6e5;
				margin-right: 10px;
			}
		}

		::v-deep {
			.custom-form .el-card__body {
				width: 100%;
				margin: 0 auto;
				padding-bottom: 5px;
			}

			.el-form-item__content {
				min-height: auto;
			}

			.el-form .el-form-item {
				margin-bottom: 18px;
				width: 33%;
			}
			.el-card {
				margin-bottom: 10px;
			}
			.grid4 {
				flex-wrap: wrap;
				.el-form-item {
					width: 25%;
				}
			}
		}
	}
	.footer {
		width: 100%;
		height: 60px;
		align-items: center;
	}
</style>
